<!DOCTYPE html>
<html>

{include file='public/header'}

<body>
    <div class="x-body">
        <blockquote class="layui-elem-quote">广告账户ID：<span id="advertiser_id"></span></blockquote>
        <div id="EchartCurve" style="width: 100%;height: 350px;"></div>
        <table id="detailTiktok" lay-filter="detailTiktok"></table>
    </div>
    
    <script>
        //let company_id = 45
        //let advertiser_id = 1776722950396935
        let company_id = GetQueryString('company_id')
        let advertiser_id = GetQueryString('advertiser_id')
        let link_id = GetQueryString('link_id')
        $("#advertiser_id").html(advertiser_id)
        let params = {
            elem: '#detailTiktok'
            , toolbar: true
            , url: '/cps/cost_info/detailTiktok' //数据接口
            , where:{
                advertiser_id,
                company_id,
                link_id
            }
            , id: 'detailTiktok'
            , page:false
            , cols: [[ //表头
                { field: 'stat_time', title: '时间' ,width:200 ,totalRowText: '合计：', align:'center' }
                , { field: 'stat_cost', title: '消耗',align:'center',sort:true }
                , { field: 'reality_cost', title: '实际消耗',align:'center',sort:true }
                , { field: 'new_user_number', title: '新增人数',align:'center' }
                , { field: 'new_user_pay_number', title: '充值人数',align:'center' }
                , { field: 'new_recharge_number', title: '充值笔数',align:'center' }
                , { field: 'conversion_cost', title: '转化成本',align:'center' }
                , { field: 'current_recharge', title: '充值',align:'center' }
                , { field: 'current_recharge_discount', title: '收益',align:'center',sort:true}
                , { field: 'current_recharge_profit', title: '利润',align:'center',sort:true }
               , { field: 'actual_recovery', title: 'ROI',align:'center' }
                , { field: 'recharging_rate', title: '复冲率',align:'center' }
                , { field: 'percapita_number', title: '人均次数',align:'center' }
            ]]
        }
        tableList(params)
        // echarts图表
        var EchartCurve = echarts.init(document.getElementById('EchartCurve'));
        Ajax('/cps/open_douyin/getStatisticsChart',{link_id,company_id,advertiser_id}).then(res=>{
            //console.log(res)
            var xObj =  new Array();
            var yObj= new Array();
            $.each(res.data.stats, function (index, value) {
                //console.log(value);
                // 在这里执行对每个元素的操作
               xObj.push(value.stat_time_hour);
               yObj.push(value.metrics.stat_cost);
            });
            //console.log(xObj);
            //console.log(yObj);
           //指定图表配置项和数据
           var optionchart = {
                title: {
                    text: '数据分析'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: { //顶部显示 与series中的数据类型的name一致
                    data: ['巨量消耗']
                },
                xAxis: {
                    // type: 'category',
                    boundaryGap: false, //从起点开始
                    data: Object.keys(xObj),
                    axisLabel:{
                        rotate:0
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '消耗',
                    type: 'line', //线性
                    data: Object.values(yObj),
                    itemStyle: {
                        normal: {
                            color: '#009688',
                            lineStyle: {
                                color: '#009688'
                            }
                        }
                    },
                }],
                grid: [{
                    bottom: '12%',
                    top: '20%',
                    left: os.isAndroid || os.isPhone ? '15%' : '4%',
                    right: '3%',
                }]
            };
            EchartCurve.setOption(optionchart, true);    // 折线图
       
        })

    </script>
</body>

</html>